<template>
  <div class="channel-edit">
    <!-- 当前登陆用户已经订阅的频道 -->
    <div class="channel">
      <van-cell title="我的频道" :border="false">
        <van-button size="mini" class="editBtn" @click="editing = !editing">{{
          editing ? "取消" : "编辑"
        }}</van-button>
      </van-cell>
      <van-grid>
        <van-grid-item
          v-for="(channel, idx) in channels"
          :key="channel.id"
          :class="{ cur: idx === curIndex }"
        >
          <span>{{ channel.name }}</span>
          <van-icon
            @click="changeMyChannel(idx)"
            name="cross"
            v-show="editing && idx != 0"
            class="btn"
          ></van-icon>
        </van-grid-item>
      </van-grid>
    </div>
    <!-- 当前登陆用户没有订阅的频道 -->
    <div class="channel">
      <van-cell title="可选频道" :border="false"></van-cell>
      <van-grid>
        <van-grid-item
          v-for="item in recommendChannels"
          :key="item.id"
          @click="changeCommendChannel(item)"
        >
          <span>{{ item.name }}</span>
        </van-grid-item>
      </van-grid>
    </div>
  </div>
</template>

<script>
import { getAllChannels, addChannel, delChannel } from '@/api/channel.js'
export default {
  name: 'ChannelEdit',
  props: {
    channels: {
      type: Array
    },
    curIndex: {
      type: Number
    }
  },
  data () {
    return {
      allChannels: [], // 全部频道列表
      editing: false // 是否处于编辑状态
    }
  },
  methods: {
    // 加载全部频道列表
    async loadGetAllChannels () {
      const res = await getAllChannels()
      // console.log(res)
      this.allChannels = res.data.data.channels
    },
    // 改变选中的频道列表， 根据下标来更改
    // 判断要是处于编辑状态时，处于删除状态；要是没有处于编辑状态时，才会进行频道的切换
    changeMyChannel (idx) {
      // true 表示在编辑状态
      if (this.editing) {
        this.doDelChannel(idx)
      } else {
        this.$emit('update-cur-channel', idx)
      }
    },
    // 删除频道
    async doDelChannel (idx) {
      try {
        const channelID = this.channels[idx].id
        await delChannel(channelID)
        this.channels.splice(idx, 1)
        // 删除bug修复： 如果删除激活频道之前的频道，会导致激活频道错位，所以需要我们把激活频道的下标-1
        if (idx < this.curIndex) {
          // 如果点击的是激活之前的频道
          // 通知父组件 下标 - 1
          this.$emit('fixed-cur-channel', this.curIndex - 1)
        }
        this.$toast.success('删除成功')
      } catch (err) {
        this.$toast.fail('删除失败')
      }
    },
    // 点击可选频道中，添加到我的频道中
    async changeCommendChannel (curChannel) {
      try {
        // 传参channels的形式为  [ {id:频道id,seq:顺序序号},{} ]
        // 注意id为0的推荐频道，不传
        const channels = [...this.channels, curChannel]
          .map((item, idx) => {
            return {
              id: item.id,
              seq: idx
            }
            // filter过滤去，去除推荐频道
          })
          .filter((item) => item.id !== 0)
        await addChannel(channels)
        // 将点击的频道通过push方法添加到我的频道中
        this.channels.push(curChannel)

        this.$toast.success('订阅成功')
      } catch (err) {
        this.$toast.fail('订阅失败')
      }
    }
  },
  computed: {
    // 计算推荐频道： 全部频道 - 已有频道
    recommendChannels () {
      // filter 过滤器 findIndex查找 如果查找到了返回其下标，若是没有查找到返回-1
      // 如果idx === -1 说明没有查到，需要保存到推荐频道中
      // 如果idx 不等于 -1 说明查到了，不需要保存到推荐频道中
      const arr = this.allChannels.filter((channel) => {
        const idx = this.channels.findIndex((item) => item.id === channel.id)
        if (idx === -1) {
          return true
        } else {
          return false
        }
      })
      return arr
    }
  },
  created () {
    this.loadGetAllChannels()
  }
}
</script>

<style lang="less" scoped>
.channel {
  padding: 15px;
  font-size: 14px;
}
.btn {
  position: absolute;
  top: 0;
  right: 0;
  font-size: 24px;
}
.cur {
  color: red;
  font-weight: bold;
}
.editBtn {
  color: rgb(229, 97, 91) !important;
  margin-right: 10px;
  padding: 0 10px;
  border-color: rgb(229, 97, 91);
}
</style>
